<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<!--引入css样式 -->
		<link rel="stylesheet" href="style.css"/>
		<!--引入JQ库 -->
		<script src="../js1/jquery-1.11.0.min.js"></script>
		<script>
			//页面加载函数
			$(function (){
				//1.标签名[属性名] -> div[id]
				$("#btn1").click(function () {
					$("div[id]").css("background-color","aqua");
				});

				//2.标签名[属性名='属性值'] -> div[id='two']
				$("#btn2").click(function () {
					$("div[id='two'] ").css("background-color","aqua");
				});



			});
		</script>
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择有id属性的div"/>
		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>
